<template>
    <p style="line-height: 3.125rem; font-size: 1rem; font-weight: bold" class="main_text">
        商家活动创建
    </p>
    <div class="main">
        <!-- #################################### 查询 #################################### -->
        <div class="main_nav p20">
            <el-form :model="activityInquiry" :inline="true" ref="queryForm">
                <el-form-item label="活动名称" style="width: 20%">
                    <el-input v-model.trim="activityInquiry.name" placeholder="规则名称：" style="width: 240px" />
                </el-form-item>
                <el-form-item label="活动类型：" style="width: 20%">
                    <el-select v-model="activityInquiry.type" placeholder="" size="large" style="width: 240px">
                        <el-option v-for="item in typeOptions" :key="item.label" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否启用：" style="width: 20%">
                    <el-select v-model="activityInquiry.ifTakeEffect" placeholder="" size="large" style="width: 240px">
                        <el-option v-for="item in ifTakeEffectOptions" :key="item.label" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 20%">
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button type="primary" plain @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- #################################### 表单 #################################### -->
        <div class="content p20 mt20">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-button type="primary" @click="openDrawer">创建活动</el-button>
                <el-button type="danger" plain @click="batchDelete">批量删除</el-button>
                <el-tab-pane label="全部" name="all">
                    <el-table @selection-change="handleSelectionChange" :data="tableList" style="width: 100%"
                        class="mt20" :header-cell-style="{ background: '#f0f6fe' }" max-height="450"
                        :show-overflow-tooltip="true" v-adaptive border>
                        <el-table-column type="selection" />
                        <el-table-column label="序号" prop="id" />
                        <el-table-column label="活动编号" prop="number" />
                        <el-table-column label="活动名称" prop="name" />
                        <el-table-column label="活动类型" prop="type" />
                        <el-table-column label="活动时间" width="350">
                            <template #default="props">
                                {{ props.row.startTime + '至' + props.row.endTime }}
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="createTime" width="200" />
                        <el-table-column label="活动状态" prop="id" width="80">
                            <template #default="props">
                                <el-tag :type="getType(props.row.status)" effect="light">
                                    {{ props.row.status }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="上线/下线" prop="ifTakeEffect">
                            <template #default="props">
                                <el-switch v-model="props.row.ifTakeEffect" disabled />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="200">
                            <template #default="props">
                                <el-button size="small" link type="primary"
                                    @click="handleView(props.row)">查看</el-button>
                                <el-button size="small" link type="primary"
                                    @click="handleEdit(props.row)">编辑</el-button>
                                <el-button size="small" link type="danger"
                                    @click="handleDelete(props.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="进行中" name="inProgress">
                    <el-table @selection-change="handleSelectionChange" :data="tableList" style="width: 100%"
                        class="mt20" :header-cell-style="{ background: '#f0f6fe' }" max-height="450"
                        :show-overflow-tooltip="true" v-adaptive border>
                        <el-table-column type="selection" />
                        <el-table-column label="序号" prop="id" />
                        <el-table-column label="活动编号" prop="number" />
                        <el-table-column label="活动名称" prop="name" />
                        <el-table-column label="活动类型" prop="type" />
                        <el-table-column label="活动时间" width="350">
                            <template #default="props">
                                {{ props.row.startTime + '至' + props.row.endTime }}
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="createTime" width="200" />
                        <el-table-column label="活动状态" prop="id" width="80">
                            <template #default="props">
                                <el-tag :type="getType(props.row.status)" effect="light">
                                    {{ props.row.status }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="上线/下线" prop="ifTakeEffect">
                            <template #default="props">
                                <el-switch v-model="props.row.ifTakeEffect" disabled />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="200">
                            <template #default="props">
                                <el-button size="small" link type="primary"
                                    @click="handleView(props.row)">查看</el-button>
                                <el-button size="small" link type="primary"
                                    @click="handleEdit(props.row)">编辑</el-button>
                                <el-button size="small" link type="danger"
                                    @click="handleDelete(props.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="已结束" name="end"><el-table @selection-change="handleSelectionChange"
                        :data="tableList" style="width: 100%" class="mt20"
                        :header-cell-style="{ background: '#f0f6fe' }" max-height="450" :show-overflow-tooltip="true"
                        v-adaptive border>
                        <el-table-column type="selection" />
                        <el-table-column label="序号" prop="id" />
                        <el-table-column label="活动编号" prop="number" />
                        <el-table-column label="活动名称" prop="name" />
                        <el-table-column label="活动类型" prop="type" />
                        <el-table-column label="活动时间" width="350">
                            <template #default="props">
                                {{ props.row.startTime + '至' + props.row.endTime }}
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="createTime" width="200" />
                        <el-table-column label="活动状态" prop="id" width="80">
                            <template #default="props">
                                <el-tag :type="getType(props.row.status)" effect="light">
                                    {{ props.row.status }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="上线/下线" prop="ifTakeEffect">
                            <template #default="props">
                                <el-switch v-model="props.row.ifTakeEffect" disabled />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="200">
                            <template #default="props">
                                <el-button size="small" link type="primary"
                                    @click="handleView(props.row)">查看</el-button>
                                <el-button size="small" link type="primary"
                                    @click="handleEdit(props.row)">编辑</el-button>
                                <el-button size="small" link type="danger"
                                    @click="handleDelete(props.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table></el-tab-pane>
                <el-tab-pane label="未开始" name="notStart"><el-table @selection-change="handleSelectionChange"
                        :data="tableList" style="width: 100%" class="mt20"
                        :header-cell-style="{ background: '#f0f6fe' }" max-height="450" :show-overflow-tooltip="true"
                        v-adaptive border>
                        <el-table-column type="selection" />
                        <el-table-column label="序号" prop="id" />
                        <el-table-column label="活动编号" prop="number" />
                        <el-table-column label="活动名称" prop="name" />
                        <el-table-column label="活动类型" prop="type" />
                        <el-table-column label="活动时间" width="350">
                            <template #default="props">
                                {{ props.row.startTime + '至' + props.row.endTime }}
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="createTime" width="200" />
                        <el-table-column label="活动状态" prop="id" width="80">
                            <template #default="props">
                                <el-tag :type="getType(props.row.status)" effect="light">
                                    {{ props.row.status }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="上线/下线" prop="ifTakeEffect">
                            <template #default="props">
                                <el-switch v-model="props.row.ifTakeEffect" disabled />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="200">
                            <template #default="props">
                                <el-button size="small" link type="primary"
                                    @click="handleView(props.row)">查看</el-button>
                                <el-button size="small" link type="primary"
                                    @click="handleEdit(props.row)">编辑</el-button>
                                <el-button size="small" link type="danger"
                                    @click="handleDelete(props.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table></el-tab-pane>
            </el-tabs>
            <!-- #################################### 分页 #################################### -->
            <el-pagination @current-change="handleCurrentChange" v-model:current-page="currentPage" small background
                layout="prev, pager, next" :total="tableList.length" class="mt20" />
            <!-- #################################### 添加侧边抽屉 #################################### -->
            <el-drawer v-model="isShowDrawer" title="新建发放规则" :with-header="false" size="40%">
                <p class="drawerText">新建发放规则</p>
                <el-form :model="drawerForm" label-width="auto" style="" :label-position="'top'">
                    <el-form-item class="mt20"><el-input disabled placeholder="基础信息" /></el-form-item>
                    <el-form-item label="活动名称"> <el-input v-model="drawerForm.name" placeholder="" /> </el-form-item>
                    <el-form-item label="活动类型">
                        <el-select v-model="drawerForm.type" size="large">
                            <el-option v-for="item in ruleOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动时间">
                        <el-date-picker v-model="drawerForm.startTime" type="datetimerange" range-separator="To"
                            start-placeholder="开始时间" end-placeholder="结束时间" />
                    </el-form-item>
                    <el-form-item label="规则说明(非必填)">
                        <el-col :span="24">
                            <el-input v-model="drawerForm.description" maxlength="300" placeholder="规则说明"
                                show-word-limit type="textarea" /></el-col>
                    </el-form-item>
                    <el-form-item class="mt20"><el-input disabled placeholder="商品设置" /></el-form-item>
                    <el-form-item label="活动商品">
                        <el-radio-group v-model="drawerForm.radio" style="width: 100%;justify-content: space-between">
                            <el-radio :label="0">全部商品</el-radio>
                            <el-radio :label="1">部分商品</el-radio>
                            <el-button type="primary" plain :icon="Plus" @click="addCommodityBtn">添加商品</el-button>
                        </el-radio-group>
                        <el-table :data="drawerForm.commodityList" style="width: 100%" border class="mt20">
                            <el-table-column prop="number" label="商品编号" />
                            <el-table-column prop="name" label="商品名称" />
                            <el-table-column prop="inventory" label="库存" />
                            <el-table-column label="售价">
                                <template #default="props">
                                    {{ Number(props.row.price).toFixed(2) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="优惠">
                                <template #default="props">
                                    <el-input v-model="props.row.preferential" placeholder="请输入" />
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item class="mt20"><el-input disabled placeholder="优惠设置" /></el-form-item>
                    <el-form-item label="优惠券">
                        <el-radio-group v-model="drawerForm.radio" style="flex-direction: column; width: 100%;">
                            <el-radio :label="0">不使用</el-radio>
                            <el-row>
                                <el-col :span="6">
                                    <el-radio :label="1">使用优惠券</el-radio>
                                </el-col>
                                <el-col :span="18">
                                    <el-select v-model="value" placeholder="Select" value-key="value"
                                        :teleported="false">
                                        <el-option v-for="item in cities" :key="item.value" :label="item.desc"
                                            :value="item.value">
                                            <span style="float: left">{{ item.label }}</span>
                                            <span style="color: var(--el-text-color-secondary);font-size: 12px;">
                                                {{ item.value }}
                                            </span>
                                            <el-icon color="#409efc" style="float: right;top: 10px"
                                                v-if="item.value == value">
                                                <Check />
                                            </el-icon>
                                        </el-option>
                                        <template #footer>
                                            <el-button type="info" plain @click="onAddOption">
                                                添加优惠券
                                            </el-button>
                                        </template>
                                    </el-select>
                                </el-col>
                            </el-row>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item class="jcfe">
                        <el-button class="drawer-btn" @click="isShowDrawer = false">取消</el-button>
                        <el-button class="drawer-btn" type="primary" @click="handleSubmit">确定</el-button>
                    </el-form-item>
                </el-form>

            </el-drawer>
        </div>
    </div>
    <AddDialog :dialogVisible="isShowDialog" @closeDialog="closeAddDiaglog" />
    <AddDrawer :drawerVisible="innerDrawer" />
</template>

<script setup lang="ts">
// import { } from '@/api/path/index.js';
import { ElMessage, ElMessageBox } from 'element-plus';
import AddDialog from './components/AddDialog.vue';
import AddDrawer from './components/addDrawer.vue';
import {

    Plus,
    Check
} from '@element-plus/icons-vue';
import { ref, onMounted, watch, computed } from 'vue';
import { fa } from 'element-plus/es/locale';

onMounted(() => {
    initSearch();
});
const queryForm = ref(null);
const activityInquiry = ref({
    page: 1,
    row: 10,
    name: '',
    type: '',
    ifTakeEffect: '',
});
//活动类型查询数据
const typeOptions = ref([
    {
        label: '全部',
        value: '',
    },
    {
        label: '平台活动',
        value: '1',
    },
    {
        label: '平台优惠券',
        value: '2',
    },
    {
        label: '平台积分',
        value: '3',
    },
]);
const ifTakeEffectOptions = ref([
    {
        label: '已启用',
        value: '0',
    },
    {
        label: '未启用',
        value: '1',
    },
]);
const initSearch = (activeName: string = 'all') => {
    console.log(activeName);
};

const handleSearch = () => { };
const handleReset = () => {
    activityInquiry.value = {
        page: 1,
        row: 10,
        name: '',
        type: '',
        ifTakeEffect: '',
    };
};

//tabs选项卡数据
const activeName = ref('all')
const handleClick = (pane: any, ev: any) => {
    console.log(pane.props.name)
}


//批量删除
const batchDelete = () => { }

//table数据
interface TableData {
    id: number;
    number: string;
    name: string;
    type: string;
    startTime: string;
    endTime: string;
    createTime: string;
    status: string;
    ifTakeEffect: boolean;
    [propName: string]: any;

}
const tableList = ref<TableData[]>([])
for (let i = 0; i < 50; i++) {
    tableList.value.push({
        id: i,
        name: '活动名称',
        number: 'DH240123',
        type: '平台活动',
        startTime: '2022-08-01 00:00:00',
        endTime: '2022-08-01 00:00:00',
        createTime: '2022-08-01 00:00:00',
        status: '进行中',
        ifTakeEffect: true,

    })
}
type TypeStatus = 'primary' | 'success' | 'info' | 'warning' | 'danger'
function getType(status: string): TypeStatus {
    if (status === '进行中') {
        return 'success';
    } else if (status === '已结束') {
        return 'info';
    } else {
        return 'primary';
    }
}
const handleSelectionChange = () => { }
const handleView = (row: any) => {
    console.log(row);
}
const handleEdit = (row: any) => {
    console.log(row);
}
const handleDelete = (row: any) => {
    console.log(row);
}
//分页
const currentPage = ref<number>(1);
const handleCurrentChange = (val: number) => {
    activityInquiry.value.page = val;
    currentPage.value = val;
    initSearch(activeName.value)
}
//openDrawer
interface commodity {
    //商品编号
    number: string
    //商品名称
    name: string;
    //库存
    inventory: number;
    //价格
    price: number;
    //优惠价格
    preferential: number;
}
interface DrawerForm {
    name: string;
    type: string;
    startTime: any;
    // endTime: string;
    description: string;
    commodityList: commodity[];
    coupon: string[];
    radio: number;
    [propName: string]: any;
}

const isShowDrawer = ref<boolean>(false)
const drawerForm = ref<DrawerForm>({
    //活动名称
    name: '',
    //活动类型
    type: '',
    //活动开始时间
    startTime: '',
    // //活动结束时间
    // endTime: '',
    //活动描述
    description: '',
    //活动商品列表
    commodityList: [{ number: 'DH24451', name: '配件', inventory: 100, price: 100, preferential: 100 }, { number: 'DH24451', name: '配件', inventory: 100, price: 100, preferential: 100 }, { number: 'DH24451', name: '配件', inventory: 100, price: 100, preferential: 100 }],
    //活动优惠券列表
    coupon: [],
    //商品范围
    radio: 0
})


const value = ref('')
const cities = [
    {
        value: '满300打9折',
        label: '嘉年华优惠券',
        desc: '嘉年华优惠券 - 满300打9折'
    },
    {
        value: '满100减10',
        label: '618优惠券',
        desc: '618优惠券 - 满100减10'
    },
    {
        value: '满100减15/满200减20',
        label: '双11优惠券',
        desc: '双11优惠券 - 满100减15/满200减20'
    },
]
const innerDrawer = ref(false)
const onAddOption = () => {
    innerDrawer.value = true
}
//活动商品
const openDrawer = () => {
    isShowDrawer.value = true
}
//isShowDialog
const isShowDialog = ref<boolean>(false)
const addCommodityBtn = () => {
    isShowDialog.value = true
}
const closeAddDiaglog = () => {
    isShowDialog.value = false
}
const handleSubmit = () => { }
</script>

<style scoped lang="scss">
.main {
    width: 100%;

    .main_nav {
        background-color: #fff;
    }

    .jcfe {
        ::v-deep(.el-form-item__content) {
            justify-content: flex-end;
        }
    }

    .drawer-btn {
        width: 90px;
        height: 40px;
        border-radius: 4px 4px 4px 4px;
    }

    .content {
        width: 100%;
        background-color: #fff;

        .drawerText {
            font-size: 1.125rem;
            font-weight: 700;
        }
    }

    :deep(.el-overlay .el-icon svg) {
        color: black;
    }

    .order ::v-deep(.el-select__prefix) {
        order: 2;
    }
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    .el-icon svg {
        color: #fff;
    }
}

:deep(.el-radio-group) {
    align-items: flex-start;
}

:deep(.el-pagination) {
    justify-content: center;
}

.el-row {
    width: 100%;
}

:deep(.el-form-item) {
    align-items: center;
}
</style>
